<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" href="css/home.css">
		<link rel="stylesheet" href="css/base.css">
		<script type="text/javascript" src="http://api.map.baidu.com/api?key=&v=1.1&services=true"></script>
		<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script src="js/canvas/echarts.js"></script>
		<script src="js/canvas/canvas6.js"></script>
		<script src="js/setting.js"></script>
		<script type="text/javascript" src="js/personInfro.js"></script>
		<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
		<script type="text/javascript" src="js/code/jquery.min.js"></script>
		<script type="text/javascript" src="js/code/jquery.qrcode.min.js"></script>
		<title>舆情定制</title>
	</head>
	<body>
		<div class="wholePublic-box">
			<div class="wholePublic-header clearfix">
				<div class="wholePublic-logo fl ">
					<a href="index-logged.html"><img src="images/logo-2.png" /></a>
				</div>
				<div class="wholePublic-header-list fl">
					<ul class="clearfix">
						<li onclick="javascript:window.location='wholePublic-company.html'">全部舆情</li>
						<li onclick="javascript:window.location='my-custom.html'">舆情定制</li>
						<li onclick="javascript:window.location='analysis.html'">分析报告</li>
						<li onclick="javascript:window.location='thinkTank.html'">智库</li>
						<li onclick="javascript:window.location='contactUs.html'">联系我们</li>
					</ul>
				</div>
				<div class="wholePublic-header-right fr">
					<ul class="clearfix">
						<li id="line"><img src="images/line-2.png" /></li>
						<li onclick="javascript:window.location='my-custom.html'">我的定制</li>
						<li id="exit"><img src="images/exit-2.png" /></li>
						<li class="setting-icon">
							<div id="setting-icon"><img src="images/setting-icon.png" /></div>
							<div class="setting-list">
								<span class="setting-arrow"></span>
								<ul>
									<li onclick="javascript:window.location='company-setting.html'">企业认证</li>
									<li onclick="javascript:window.location='financial-setting.html'">财务中心</li>
								</ul>
							</div>
						</li>
					</ul>

				</div>

			</div>
			<div class="grcolor-box"></div>

			<div class="container ">
				<div class="setting-line financial-setting-line">
					<ul class="clearfix">
						<li class="setting-line-selected">银行卡绑定</li>
						<li>流量管理</li>
						<li data_data="1" onclick="recharge(this)">充值中心</li>
						<li>明细</li>
					</ul>
				</div>

				<!--企业认证-->

				<!--银行卡绑定-->
				<div class="setting-item card-box">
					<div class="company-setting-title">添加绑定银行卡<span class="card-add"><img src="images/add.png"/></span></div>
					<div class="card-list">
					</div>
					<div class="card-list-box password-box">
						<div><span>持卡人：</span><input placeholder="输入持卡人姓名 " class="input-4" id="userName"></div>
						<div><span>手机号码：</span><input type="tel" placeholder="输入手机号码 " class="input-4" id="card_phone"></div>
						<div><span>身份证号：</span><input type="tel" placeholder="输入身份证号 " class="input-4 input-6" id="ID_card"></div>
						<div><span>银行卡号：</span><input type="tel" placeholder="输入银行卡号 " class="input-4 input-6" id="band_card"></div>
						<div>
							<span>所属银行：</span>
							<select id="affiliated_bank">
							</select>
						</div>
						<div><button onclick="bank()">确定</button></div>
					</div>

				</div>

				<!--流量管理-->
				<div class="setting-item flux-box">
					<div class="company-setting-title">流量使用情况</div>
					<div id="pieChart-6"></div>
				</div>

				<!--充值中心-->
				<div class="setting-item recharge-box">
					<div class="recharge-title">
						<ul class="clearfix">
							<li data_data="1" onclick="recharge(this)"><span class="option-selected span-1 fl"></span><span>包月充值</span></li>
							<li data_data="2" onclick="recharge(this)"><span class="span-1 fl"></span><span>包年充值</span></li>
						</ul>
					</div>
					<div class="recharge-infro">
						<ul class="clearfix">
						</ul>
					</div>
					<div class="recharge-method">支付方式选择</div>
					<div class="recharge-method-item">
						<ul class="clearfix">
							<li data_id="2" onclick="order(this)"><span class="span-1 fl"></span><span><img src="images/alipay.png"/></span><span>支付宝</span></li>
							<li data_id="1" onclick="order(this)"><span class="span-1 fl"></span><span><img src="images/weChat.png"/></span><span>微信</span></li>
							<!--<li data_id="3"><span class="span-1 fl"></span><span><img src="images/card.png"/></span><span>银行卡</span></li>-->
						</ul>
					</div>
					<div class="card-list">
						<ul>
							<li class="card-item card-item-selected">
								<span>中国工商银行</span><span>2546 2642 3598 5426 245</span><span><img src="images/right.png"/></span>
							</li>
							<li class="card-item">
								<span>中国工商银行</span><span>2546 2642 3598 5426 245</span><span><img src=""/></span>
							</li>
						</ul>
					</div>
					<div id="main">
						<div class="demo">
							<div class="code"></div>
						</div>
						<div class="text">微信扫一扫支付</div>
					</div>
				</div>

				<!--明细-->
				<div class="detail-box">
					<div class="detail-item clearfix">
						<span class="fl">+288达豆</span>
						<span class="fl pay-method">&yen288（支付宝充值）</span>
						<span class="fr">充值时间：2018-03-25 09:45</span>
					</div>
					<div class="detail-item clearfix">
						<span class="fl">+288达豆</span>
						<span class="fl pay-method ">&yen288（支付宝充值）</span>
						<span class="fr">充值时间：2018-03-25 09:45</span>
					</div>
				</div>

			</div>
		</div>
		<div id="mask"></div>
	</body>

</html>
<script>
	var token = sessionStorage.getItem('token');
	var useraccount = JSON.parse(token).useraccount;
	var userid = JSON.parse(token).id;
	var vals;
	var scanCode;
	var payId;
	var type;

	//添加银行卡框的显示与隐藏
	$(".card-add").click(function() {
		$(".card-list-box").show();
		bank_type();
	});

	//所属银行
	function bank_type() {
		$.ajax({
			type: "post",
			url: 'http://139.224.208.224:8080/qi-radar/user/getBankList',
			dataType: 'json',
			contentType: "application/json ",
			asycn: false,
			success: function(data) {
				if(data.code == 0) {
					var data = data.data;
					var list = "";
					for(var i = 0; i < data.length; i++) {
						list += "<option>" + data[i].bankname + "</option>";
					};
					$("#affiliated_bank").html(list);
				} else {
					alert(data.errMsg)
				};
			}
		});
	}

	document.getElementById("band_card").addEventListener('keyup', function(event) {
		var e = event || window.event || arguments.callee.caller.arguments[0];
		if(e.keyCode !== 8 && (e.keyCode < 48 || (e.keyCode > 57 && e.keyCode < 96) || e.keyCode > 105)) {
			this.value = this.value.slice(0, -1);
		}
		if(e.keyCode === 8) {
			if(this.value.slice(-1) === ' ') {
				this.value = this.value.slice(0, -1);
			}
		} else if(e.keyCode !== 8) {
			switch(this.value.length) {
				case 4:
					this.value += ' ';
					break;
				case 8 + 1:
					this.value += ' ';
					break;
				case 12 + 2:
					this.value += ' ';
					break;
			}
		}
	});

	//银行卡绑定
	function bank() {
		var card_phone = /^[1][3,4,5,7,8][0-9]{9}$/;
		if(!card_phone.test($("#card_phone").val())) {
			alert("请输入正确格式的手机号");
			return false;
		};
		var ID_card = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/;
		if(!ID_card.test($("#ID_card").val())) {
			alert("请输入正确格式的身份证");
			return false;
		};
		var band_card = /^([1-9]{1})(\d{14}|\d{18})$/;
		if(!band_card.test($('#band_card').val())) {
			alert("请填写正确格式的银行卡号")
			return false
		} else {
			var datas = {
				'id': parseInt(userid),
				'cardholder': $("#userName").val(),
				'card_phone': $("#card_phone").val(),
				'ID_card': $("#ID_card").val(),
				'band_card': $("#band_card").val(),
				'affiliated_bank': $("#affiliated_bank").val(),
			};
			var data = JSON.stringify(datas);
			$.ajax({
				type: "post",
				url: 'http://139.224.208.224:8080/qi-radar/user/bingBankCard',
				dataType: 'json',
				contentType: "application/json ",
				asycn: false,
				data: data,
				success: function(data) {
					if(data.code == 0) {
						alert("添加成功");
						var data = data.data;
						var list = "";
						list += "<div class=\"card-item\">" +
							"<span>" + $("#affiliated_bank").val() + "</span><span>" + $("#band_card").val() + "</span>" +
							"</div>";
						$(".card-list").after(list)
					} else {
						alert(data.errMsg)
					};
				}
			});
		}
	};

	//包年包月充值
	function recharge(a) {
		vals = $(a).attr('data_data');
		var datas = {
			'type': vals,
		};
		var data = JSON.stringify(datas);
		$.ajax({
			type: "post",
			url: 'http://139.224.208.224:8080/qi-radar/recharge/getPackageList',
			dataType: 'json',
			contentType: "application/json ",
			asycn: false,
			data: data,
			success: function(data) {
				if(data.code == 0) {
					var data = data.data;
					console.log(data)
					var list = "";
					var money = [];
					for(var i = 0; i < data.length; i++) {
						money.push(data[i].paymoney / 100)
						list += "<li data_id=\"" + data[i].id + "\">";
						list += "<div class=\"recharge-bean\"><span><img src=\"images/goldBean.png\"/></span><span class=\"recharge-num\">" + money[i] + "</span></div>";
						list += "<div class=\"custom-made\">可创建" + data[i].custnum + "个定制</div>";
						list += "</li>";
					}
					$(".recharge-infro ul").html(list);
					$(".recharge-infro ul li").eq(0).addClass("recharge-item-selected");
					$(".recharge-infro ul li").click(function() {
						$(this).addClass("recharge-item-selected");
						$(this).siblings().removeClass("recharge-item-selected");
					});
				} else {
					alert(data.errMsg)
				};
			}
		});
	};
	
	//下单
	function order(a) {
		var $currentSelectedItem = $(".recharge-infro li.recharge-item-selected");
		payId = $currentSelectedItem.attr('data_id');
		$("#mask").show();
		type = $(a).attr('data_id');
		console.log(payId)
		var datas = {
			'useraccount': useraccount,
			'paytype': type,
			'repack_id': payId,
		};
		var data = JSON.stringify(datas);
		$.ajax({
			type: "post",
			url: 'http://139.224.208.224:8080/qi-radar/recharge/unifiedorder',
			dataType: 'json',
			contentType: "application/json ",
			asycn: true,
			data: data,
			success: function(data) {
				var data = data.data;
				console.log(data);
				console.log(data.appId)

				var out_trade_no = data.out_trade_no;
				var scanCode = data.code_url;
				console.log(scanCode);
				var str = toUtf8(scanCode);
				$(".code").qrcode({
					render: "canvas",
					width: 200,
					height: 200,
					text: str
				});
				$("#main").show();
			
				//查询订单
				function orderquery(){
					$.ajax({
						type: "get",
						url: 'http://139.224.208.224:8080/qi-radar/recharge/orderquery',
						dataType: 'json',
						contentType: "application/json",
						data: 'out_trade_no=' + out_trade_no,
						success: function(data) {
							if(data.code == 0) {
								var res = data.data
								if(res== true) {
									alert("支付成功");
									clearInterval(t1)
									window.location.reload();
								} 
							}
						}
					});
				};
				var t1= setInterval(function(){orderquery();}, 3000);
			}
		})

	}

	//二维码
	function toUtf8(str) {
		var out, i, len, c;
		out = "";
		len = str.length;
		for(i = 0; i < len; i++) {
			c = str.charCodeAt(i);
			if((c >= 0x0001) && (c <= 0x007F)) {
				out += str.charAt(i);
			} else if(c > 0x07FF) {
				out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
				out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
				out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
			} else {
				out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
				out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
			}
		}
		return out;
	}
</script>